<template>
  <el-drawer
    :title="title"
    :visible.sync="open"
    direction="rtl"
    size="36%"
    :destroy-on-close="true"
    :wrapper-closable="false"
    :before-close="handleClose"
  >
    <div class="drawer-content">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-position="left"
        label-width="100px"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-form-item label="服务名" prop="name">
          <el-input v-model="formData.name" maxlength="100" />
        </el-form-item>
        <el-form-item label="服务类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择服务类型">
            <el-option
              v-for="(item, index) in dictList.typeList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="流程" prop="flowId">
          <el-select v-model="formData.flowId" placeholder="请选择流程">
            <el-option
              v-for="(item, index) in dictList.flowIdList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务目录" prop="catalogueIds">
          <el-cascader
            v-model="formData.catalogueIds"
            style="width: 100%"
            :options="dictList.catalogueIdList"
            :props="{
              checkStrictly: true,
              children: 'children',
              label: 'label',
            }"
            clearable
            filterable
          />
        </el-form-item>
        <el-form-item label="通知">
          <el-select v-model="formData.noticeId" placeholder="请选择通知">
            <el-option
              v-for="(item, index) in dictList.noticeIdList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="userId">
          <el-select v-model="formData.userId" placeholder="请选择负责人">
            <el-option
              v-for="(item, index) in dictList.userIdList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="formData.description"
            type="textarea"
            maxlength="500"
            rows="4"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {
  createServiceDef,
  flowListUse,
  listTreeCatalogue,
  allList,
  getAllUser,
  updateServiceDef,
  findById
} from '@/api/basicConfig/serviceConfig'
import { setArr } from './utils/setArr'
export default {
  data() {
    return {
      open: false,
      type: '',
      currentId: '',
      title: '新建',
      formData: {},
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
        catalogueIds: [{ required: true, message: '请输入', trigger: 'blur' }],
        flowId: [{ required: true, message: '请输入', trigger: 'blur' }],
        userId: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      dictList: {
        typeList: [
          {
            label: '事件管理',
            value: '1'
          },
          {
            label: '问题管理',
            value: '2'
          },
          {
            label: '变更管理',
            value: '3'
          },
          {
            label: '部署与发布管理',
            value: '4'
          }
        ],
        flowIdList: [],
        catalogueIdList: [],
        noticeIdList: [],
        userIdList: []
      }
    }
  },

  methods: {
    //  显示弹窗
    handleShow(type, row) {
      this.open = true
      this.getFlowIdList()
      this.getCatalogue()
      this.getNoticeData()
      this.getAllUserData()
      this.type = type
      // this.currentId = row.id;
      if (type == 'edit') {
        this.getByIdData(row.id)
      }
    },
    //  获取详情数据
    async getByIdData(id) {
      const res = await findById({ id: id })
      this.formData = JSON.parse(JSON.stringify(res))
    },

    // 关闭弹窗
    handleClose() {
      this.$refs.formRef.resetFields()
      this.formData = {}
      this.open = false
    },
    //  提交
    handleSubmit() {
      this.$refs.formRef.validate(async(valid) => {
        if (valid) {
          if (this.type == 'add') {
            const res = await createServiceDef({
              ...this.formData,
              catalogueId:
                this.formData.catalogueIds[
                  this.formData.catalogueIds.length - 1
                ]
            })
          } else {
            const res = await updateServiceDef({
              ...this.formData,
              catalogueId:
                this.formData.catalogueIds[
                  this.formData.catalogueIds.length - 1
                ]
            })
          }
          this.$message.success('保存成功')
          this.handleClose()
          this.$emit('handleSubmit')
        } else {
          this.$message.error('请填写必填项')
          return false
        }
      })
    },

    //  获取流程数据
    async getFlowIdList() {
      const res = await flowListUse()
      if (res.length > 0) {
        this.dictList.flowIdList = res.map((i) => {
          return { label: i.flowName, value: i.id }
        })
      }
    },
    //  获取通知数据
    async getNoticeData() {
      const res = await allList()
      if (res.length > 0) {
        this.dictList.noticeIdList = res.map((i) => {
          return { label: i.name, value: i.id }
        })
      }
    },
    //  获取服务目录数据
    async getCatalogue() {
      const res = await listTreeCatalogue()
      this.dictList.catalogueIdList = setArr(res)
    },
    //  获取所有用户数据
    async getAllUserData() {
      const res = await getAllUser()
      if (res.length > 0) {
        this.dictList.userIdList = res.map((i) => {
          return { label: i.name, value: i.id }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
::v-deep .el-form-item__label,
.el-select {
  width: 100%;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
  width: 100%;
}
::v-deep .el-drawer__header {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 0 !important;
  padding-bottom: 20px;
}
::v-deep .el-drawer__body {
  display: flex;
  flex-direction: column;
}
.drawer-content {
  padding: 10px 20px;
  flex: 1;
  overflow: auto;
}
.drawer-footer {
  padding: 20px;
  text-align: right;
}
</style>
